<template>
  <a-modal
    title="选课策略设置"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="700px"
    :confirmLoading="confirmLoading"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="选课轮次">
            <a-select
              v-decorator="[
                'round',
                {
                  initialValue: strategy.round,
                  rules: [{ required: true, message: '请选择选课轮次' }]
                }
              ]"
            >
              <a-select-option value="main">正选</a-select-option>
              <a-select-option value="supplement">补选</a-select-option>
              <a-select-option value="adjustment">调课</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="选课策略类型">
            <a-select
              v-decorator="[
                'strategyType',
                {
                  initialValue: strategy.strategyType,
                  rules: [{ required: true, message: '请选择选课策略类型' }]
                }
              ]"
            >
              <a-select-option value="firstCome">先到先得</a-select-option>
              <a-select-option value="lottery">抽签制</a-select-option>
              <a-select-option value="creditBidding">选课币竞拍</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="班级容量">
            <a-input-number
              v-decorator="[
                'capacity',
                {
                  initialValue: strategy.capacity,
                  rules: [{ required: true, message: '请输入班级容量' }]
                }
              ]"
              :min="10"
              :max="200"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="课程上限">
            <a-input-number
              v-decorator="[
                'courseLimit',
                {
                  initialValue: strategy.courseLimit,
                  rules: [{ required: true, message: '请输入课程上限' }]
                }
              ]"
              :min="1"
              :max="10"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="学分上限">
            <a-input-number
              v-decorator="[
                'creditLimit',
                {
                  initialValue: strategy.creditLimit,
                  rules: [{ required: true, message: '请输入学分上限' }]
                }
              ]"
              :min="10"
              :max="40"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="选课币初始值">
            <a-input-number
              v-decorator="[
                'initialCredits',
                {
                  initialValue: strategy.initialCredits || 100,
                  rules: [{ required: true, message: '请输入选课币初始值' }]
                }
              ]"
              :min="50"
              :max="500"
              style="width: 100%"
              :disabled="form.getFieldValue('strategyType') !== 'creditBidding'"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="跨年级选课">
        <a-switch
          v-decorator="[
            'crossGrade',
            {
              initialValue: strategy.crossGrade,
              valuePropName: 'checked'
            }
          ]"
        />
      </a-form-item>

      <a-form-item label="跨专业选课">
        <a-switch
          v-decorator="[
            'crossMajor',
            {
              initialValue: strategy.crossMajor,
              valuePropName: 'checked'
            }
          ]"
        />
      </a-form-item>

      <a-form-item label="选课时间范围">
        <a-range-picker
          v-decorator="[
            'timeRange',
            {
              initialValue: strategy.timeRange || [],
              rules: [{ required: true, message: '请选择选课时间范围' }]
            }
          ]"
          showTime
          format="YYYY-MM-DD HH:mm"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item label="特殊说明">
        <a-textarea
          v-decorator="['remarks']"
          placeholder="请输入选课策略的特殊说明"
          :rows="3"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    strategy: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this)
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            ...this.strategy,
            timeRange: this.strategy.timeRange || []
          });
        });
      }
    }
  },
  methods: {
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          // 模拟保存操作
          setTimeout(() => {
            this.confirmLoading = false;
            this.$emit('ok', {
              ...values,
              timeRange: values.timeRange.map(t => t.format('YYYY-MM-DD HH:mm'))
            });
          }, 800);
        }
      });
    },
    handleCancel() {
      this.$emit('cancel');
    }
  }
};
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
}
</style>